<template>
  <div class="region_add">
    <div class="viewPort" ref="viewPort">
      <el-card class="box-card" ref="boxCard">
        <div class="title">
          <span>添加区域信息</span>
        </div>
        <div class="detail">
          <div class="elForm">
            <el-form
              :model="add"
              :rules="rules"
              ref="ruleForm"
              label-width="auto"
            >
              <el-row v-if="next">
                <el-col :span="24">
                  <el-form-item label="公司名称" prop="org_id">
                    <el-input
                      v-model="currentCompanyName"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="区域名称" prop="reg_name">
                    <el-input v-model="add.reg_name" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="区域类型" prop="reg_type">
                    <el-select
                      v-model="add.reg_type"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="停车位总数" prop="reg_space_count">
                    <el-input
                      v-model.number="add.reg_space_count"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="停车位剩余数量" prop="reg_space_recount">
                    <el-input
                      v-model.number="add.reg_space_recount"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div style="margin-top: 25px" v-if="!next">
              <el-button icon="el-icon-arrow-left" @click="back"
                >返回</el-button
              >
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
                style="margin: 50px 50px"
                >提交<i class="el-icon-arrow-right el-icon--right"></i
                ><i class="el-icon-upload el-icon--right"></i
              ></el-button>
            </div>
            <div
              class="next_btn"
              ref="next_btn"
              @click="nextStep"
              v-if="add.reg_type === '单位'"
            >
              <div class="next_btn1">
                <span>绑定合作单位</span>
              </div>
              <div class="next_btn2">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
          <div class="bindSapce">
            <div>
              <el-input
                placeholder="请输入内容"
                v-model="searchData"
                clearable
                style="width: 220px"
              >
              </el-input>
              <el-button
                type="primary"
                icon="el-icon-search"
                style="margin-left: 15px"
                >搜索</el-button
              >
            </div>
            <el-card class="box-card2" shadow="hover">
              <div class="table">
                <el-table
                  ref="singleTable"
                  :data="companyData.slice((lazyPage - 1) * 5, lazyPage * 5)"
                  highlight-current-row
                  @current-change="selectRow"
                  style="margin: 5px auto; width: 100%"
                  size="small"
                >
                  <el-table-column property="company_id" label="ID" width="50">
                  </el-table-column>
                  <el-table-column
                    property="company_name"
                    label="公司名称"
                    width="80"
                  >
                  </el-table-column>
                  <el-table-column
                    property="company_director"
                    label="负责人"
                    width="80"
                  >
                  </el-table-column>
                  <el-table-column
                    property="company_tel"
                    label="联系电话"
                    width="120"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
            <div style="margin-top: 15px">
              <el-pagination
                small
                layout="prev, pager, next"
                :total="total"
                :current-page="currentPage"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
          <div class="btn" v-if="next">
            <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              style="margin: 50px 50px"
              >提交<i class="el-icon-arrow-right el-icon--right"></i
              ><i class="el-icon-upload el-icon--right"></i
            ></el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Region_Add",
  inject: ["regionRefresh"],
  data() {
    return {
      next: false,
      add: {
        org_id: null,
        company_director: "",
        reg_name: "",
        reg_type: "普通",
        reg_space_count: null,
        reg_space_recount: null,
      },
      searchData: "",
      companyData: [],
      currentRow: null,
      currentCompanyName: "",
      currentPage_old: 1,
      currentPage: 1,
      total: 0,
      rules: {
        reg_type: [
          { required: true, message: "请选择区域类型", trigger: "blur" },
        ],
        reg_space_count: [
          { required: true, message: "请输入停车位总数", trigger: "blur" },
        ],
        reg_space_recount: [
          { required: true, message: "请输入停车位剩余数量", trigger: "blur" },
        ],
      },
      searchData: "",
      options: [
        {
          value: "普通",
          label: "普通",
        },
        {
          value: "单位",
          label: "单位",
        },
      ],
    };
  },
  created() {
    this.getCompanyList();
  },
  computed: {
    lazyPage: function () {
      if (this.currentPage < 4) {
        return this.currentPage;
      } else {
        return this.currentPage % 3 === 0 ? 3 : this.currentPage % 3;
      }
    },
  },
  methods: {
    back() {
      this.$store.commit("maskStatus_change", false);
      this.$router.go(-1);
      this.pageRefresh();
    },
    //刷新页面
    pageRefresh() {
      this.regionRefresh();
    },
    //获取合作单位
    getCompanyList() {
      this.axios
        .get("/company/companyList", {
          params: {
            page: 1,
            count: 15,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.companyData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取停车位区域列表失败");
        });
    },
    //搜索合作单位
    searchCompany() {
      if (this.searchData) {
        this.axios
          .get("/company/searchCompany", {
            params: {
              companyName: this.searchData,
              companyDirector: this.searchData,
            },
          })
          .then((res) => {
            this.companyData = res.data.data.list;
          })
          .catch((err) => {
            this.$message.error("搜索合作单位失败");
            console.error(err);
          });
      } else {
        this.getCompanyList();
      }
    },
    //选中合作单位
    selectRow(val) {
      this.currentRow = val;
      this.currentCompanyName = this.currentRow.company_name;
      const companyId = this.currentRow.company_id;
      this.add.org_id = companyId;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
      if (Math.ceil(this.currentPage_old / 3) !== Math.ceil(val / 3)) {
        this.currentPage_old = val;
        this.pageLoad("/company/companyList", val, 3, 15)
          .then((res) => {
            this.companyData = res.data.data.list;
          })
          .catch((err) => {
            console.error(err);
            this.$message.error(`获取合作单位列表-第${val}页失败`);
          });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post("/region/addRegion", this.add, {
              "Content-Type": "application/json",
            })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.back();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("添加停车区域失败");
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "warning",
          });
          return false;
        }
      });
    },
    nextStep() {
      const viewPort = this.$refs.viewPort;
      const next_btn = this.$refs.next_btn;
      next_btn.style.display = "none";
      viewPort.classList.add("vnext");
      this.next = true;
    },
  },
};
</script>

<style scoped>
.viewPort {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-30%, 0);
  width: 490px;
  height: 620px;
  z-index: 999;
  overflow: hidden;
}
.vnext {
  transform: translate(-35%, 0);
  width: 980px;
  height: 620px;
  transition: all 0.6s ease;
}
.box-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 980px;
  height: 620px;
  z-index: 98;
}
.next {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(0, 15%);
}

.title {
  width: 90%;
  height: 5vh;
  padding: 0 0 0 30px;
  line-height: 3vh;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 1px dashed #c4c6c7;
}
.title span {
  display: inline-block;
  width: 80%;
  height: 55%;
  padding: 0px 20px;
  border-left: 5px solid #3b83cc;
}
.detail {
  position: relative;
  margin: 30px auto;
  width: 80%;
}
.detail /deep/ .el-input {
  width: 85%;
}
.detail /deep/ .el-select {
  width: 85%;
}
.detail /deep/ .el-form-item__error {
  margin-left: 8%;
}
.elForm {
  position: absolute;
  top: 50%;
  left: -8%;
  width: 25vw;
}

.next_btn {
  color: #909399;
}
.next_btn1 {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translate(0, -130%);
  width: 2vw;
  height: 8vh;
}
.next_btn2 {
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translate(0, -40%);
  width: 2vw;
  height: 8vh;
}
.next_btn:hover {
  cursor: pointer;
  color: #409eff;
}
.bindSapce {
  position: absolute;
  right: 0;
  top: 50%;
  width: 50%;
}

.box-card2 {
  margin-top: 20px;
  height: 40vh;
}
.btn {
  position: absolute;
  top: 370px;
  left: 30%;
}
</style>